<template>
    <div class="page-container">
        <el-card class="language-card">
            <template #header>
                <div class="card-header">
                    <span>订单打印设置</span>
                </div>
            </template>

            <el-radio-group v-model="currentPrintType" @change="handlePrintChange" style="margin-top: 0;">
                <el-radio-button label="自动打印" value="auto">自动打印</el-radio-button>
                <el-radio-button label="手动打印" value="shoudong">手动打印</el-radio-button>
            </el-radio-group>
        </el-card>
        <el-card class="language-card">
            <template #header>
                <div class="card-header">
                    <span>系统语言设置</span>
                </div>
            </template>

            <el-radio-group v-model="currentLanguage" @change="handleLanguageChange" style="margin-top: 0;">
                <el-radio-button label="zh" value="zh">中文</el-radio-button>
                <el-radio-button label="en" value="en">English</el-radio-button>
            </el-radio-group>
        </el-card>
        <el-card class="language-card">
            <template #header>
                <div class="card-header">
                    <span>AI语言设置</span>
                </div>
            </template>
            <el-checkbox-group v-model="currentAiLanguage" @change="handleLanguageChange2" style="margin-top: 0;">
                <el-checkbox label="zh" value="zh">中文</el-checkbox>
                <el-checkbox label="en" value="en">English</el-checkbox>
                <el-checkbox label="de" value="de">Deutsch</el-checkbox>
                <el-checkbox label="fr" value="fr">Français</el-checkbox>
            </el-checkbox-group>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useLanguageStore } from '../../stores/language'
import { ElMessage } from 'element-plus'

const languageStore = useLanguageStore()
const currentLanguage = ref(languageStore.currentLanguage)
const currentAiLanguage = ref(languageStore.currentAiLanguages || [])  // 修改为数组类型接收多选值
const currentPrintType = ref(languageStore.printType)


const handleLanguageChange = (val) => {
    console.log(languageStore)
    languageStore.setLanguage(val)
    ElMessage.success(`已切换至${val === 'zh' ? '中文' : '英文'}`)
    // 这里可以添加实际的语言包切换逻辑
}

const handleLanguageChange2 = (val) => {
    languageStore.setAiLanguage(val)
    // ElMessage.success(`已切换至${val === 'zh' ? '中文' : '英文'}`)
    // 这里可以添加实际的语言包切换逻辑
}
const handlePrintChange = (val) => {
    languageStore.setPrintType(val)
    ElMessage.success(`已切换至${val === 'auto' ? '自动打印' : '手动打印'}`)
}
</script>

<style lang="scss" scoped>
.language-card {
    max-width: 600px;
    margin: 20px auto;

    .card-header {
        font-size: 16px;
        font-weight: bold;
    }

    .el-radio-group {
        margin-top: 20px;
    }
}
</style>